<template>
<div>
  <div style="position: sticky;top:0;left:0;z-index: 9999">
    <van-nav-bar title="商品详情" left-text="返回" left-arrow
                 @click-left="onClickLeft"
                 @click-right="onClickRight"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
  </div>
<!--  轮播-->
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
    <van-swipe-item v-for="(item,index) in list['pics']" :key="index" @click="getIndex(index)">
      <img :src="item.pics_big" alt="">
    </van-swipe-item>
  </van-swipe>
<!-- 参数介绍 -->
  <div class="tile">
    {{list.goods_name}}
    <div style="color:red;font-size: 20px;margin-bottom:10px">￥{{list.goods_price}}</div>
  </div>
  <div class="lazyimg">
    <p>
      <img data-src="//image.suning.cn/uimg/sop/commodity/165841599014484645034317_x.jpg?from=mobile&amp;format=80q.webp" alt="" src="//image.suning.cn/uimg/sop/commodity/165841599014484645034317_x.jpg?from=mobile&format=80q.webp" width="100%" height="auto">
    </p>
    <p>
      <img data-src="https://image.suning.cn/uimg/sop/commodity/112353671120581834807639_x.jpg" alt="" src="https://image.suning.cn/uimg/sop/commodity/112353671120581834807639_x.jpg?from=mobile&format=80q.webp" width="100%" height="auto">
      <img data-src="https://image.suning.cn/uimg/sop/commodity/107011819233102227974560_x.jpg" alt="" src="https://image.suning.cn/uimg/sop/commodity/107011819233102227974560_x.jpg?from=mobile&format=80q.webp" width="100%" height="auto">
      <img data-src="https://image.suning.cn/uimg/sop/commodity/110581068410894496949700_x.jpg" alt="" src="https://image.suning.cn/uimg/sop/commodity/110581068410894496949700_x.jpg?from=mobile&format=80q.webp" width="100%" height="auto">
      <img data-src="https://image.suning.cn/uimg/sop/commodity/858936055658238731922700_x.jpg" alt="" src="https://image.suning.cn/uimg/sop/commodity/858936055658238731922700_x.jpg?from=mobile&format=80q.webp" width="100%" height="auto">
      <img data-src="https://image.suning.cn/uimg/sop/commodity/113944797111176510327130_x.jpg" alt="" src="https://image.suning.cn/uimg/sop/commodity/113944797111176510327130_x.jpg?from=mobile&format=80q.webp" width="100%" height="auto">
      <img data-src="https://image.suning.cn/uimg/sop/commodity/768410474111611323337700_x.jpg" alt="" src="https://image.suning.cn/uimg/sop/commodity/768410474111611323337700_x.jpg?from=mobile&format=80q.webp" width="100%" height="auto">
      <img data-src="https://image.suning.cn/uimg/sop/commodity/471778655330825817106000_x.jpg" alt="" src="https://image.suning.cn/uimg/sop/commodity/471778655330825817106000_x.jpg?from=mobile&format=80q.webp" width="100%" height="auto">
      <img data-src="https://image.suning.cn/uimg/sop/commodity/357454731749854804604600_x.jpg" alt="" src="https://image.suning.cn/uimg/sop/commodity/357454731749854804604600_x.jpg?from=mobile&format=80q.webp" width="100%" height="auto">
      <img data-src="https://image.suning.cn/uimg/sop/commodity/173335276984197451578370_x.jpg" alt="" src="https://image.suning.cn/uimg/sop/commodity/173335276984197451578370_x.jpg?from=mobile&format=80q.webp" width="100%" height="auto">
      <img data-src="https://image.suning.cn/uimg/sop/commodity/255953452205085006145140_x.jpg" alt="" src="https://image.suning.cn/uimg/sop/commodity/255953452205085006145140_x.jpg?from=mobile&format=80q.webp" width="100%" height="auto">
    </p>
  </div>
<!--  添加购物车-->
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
    <van-action-bar-icon icon="cart-o" text="购物车" @click="setcart" />
    <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
    <van-action-bar-button type="warning" text="加入购物车" @click="setItem(list)" />
    <van-action-bar-button type="danger" text="立即购买" />
  </van-action-bar>

</div>
</template>

<script>
import {useRoute,useRouter}from "vue-router"
import {reactive,ref,toRefs}from "vue"
import {useStore}from "vuex"
import { ImagePreview,Dialog } from 'vant';
import http from "../api/http";
export default {
  name: "details",
  setup(){
    const store=useStore()
    const router=useRouter()
    const show = ref(false);
    const index = ref(0);
    const route=useRoute()
    const onChange = (newIndex) => {
      index.value = newIndex;
    };
    const data=reactive({
      list:{},//
      imgList:[],//轮播图数据
    })
    const onClickLeft = () => history.back();
    const onClickRight = () =>router.push('/serch');
    const getIndex=()=>{
      ImagePreview(data.imgList)
    }
    const setcart=()=>router.push('/cart')
    //添加商品
    const setItem=(item)=>{
      item.is_promote=true
      store.commit('details/setList',item)
      Dialog({ message: '已添加到购物车！' });
    }
    http('goods/detail?goods_id='+route.query.id).then(res=>{
      data.list=res.message;
      data.list['pics'].forEach(v=>{
        data.imgList.push(v.pics_big)
      })
    })
    return{
      show,index,onChange,getIndex,setItem,setcart,
      ...toRefs(data),onClickLeft,onClickRight
    }
  },
}
</script>

<style scoped lang="less">
.tile{margin:10px;line-height:24px;border-bottom: 2px sandybrown solid}
.van-swipe-item{img{width: 100%;height: 100%}}
</style>